import { memo, useCallback } from 'react';
import { Panel, Table, TableSelectionModel } from '../../../../functionalComponent';
import { Layout, iup } from '../../../../util';
import { QueryPanel } from '../../../query-panel';
import { getSeletcedList, loadSourceData } from '../../service';
import NoticeIconContent from './NoticeIconContent';
import ShuttleButtons from './ShuttleButtons';
/**
 * 穿梭table
 * 上下
 */
const ShuttleTable = (props: any) => {
  const { getRef, state, popupMode, flowCode, busData, rowDisable, iconVisible, defaultSelectedKeys } = props;

  // 表数据data
  const tableRequest = useCallback(
    async (defaultParams) => {
      const sourceId = state.sourceId;
      const newsourceId = sourceId?.indexOf('_') ? iup.split(sourceId, '_')[1] : sourceId;
      const result = await loadSourceData({ flowCode, busData, ...defaultParams, popupMode, sourceId: newsourceId });
      return result;
    },
    [state.sourceId]
  );

  // 已选择
  const tableSelectedRequest = useCallback(async () => {
    // 无选中不需要调用接口
    if (!defaultSelectedKeys?.length) {
      return Promise.resolve({ total: 0, list: [] });
    }
    try {
      const sourceId = state.sourceId;
      const newsourceId = sourceId?.indexOf('_') ? iup.split(sourceId, '_')[1] : sourceId;
      const result = await getSeletcedList({
        id: newsourceId,
        tableIdStr: (defaultSelectedKeys || []).join(','),
        pageIndex: 1,
        pageSize: 1000
      });
      return result;
    } catch {}
  }, [state.sourceId]);

  // 搜索框
  const onSearch = (_, queryCondition) => {
    getRef('table')?.current?.getApi().setExtraParam({ queryCondition });
  };

  return (
    <Layout>
      {state.queryItems.length > 0 && <QueryPanel items={state.queryItems} onSearch={onSearch} />}
      {/* 主表 */}
      <Layout.Slider size={200}>
        <NoticeIconContent iconVisible={iconVisible}>
          <Table
            showRowNumber
            columns={state.columns}
            ref={getRef('tableMain')}
            autoLoad={true}
            request={tableRequest}
            key={state.sourceId}
            pagination={{ hideOnSinglePage: false }}
            rowSelection={{
              type: [TableSelectionModel.MULTIPLE_INTERVAL, TableSelectionModel.CHECKBOX],
              disabled: rowDisable
            }}
          />
        </NoticeIconContent>
      </Layout.Slider>
      <ShuttleButtons
        isHorizontal
        rowDisable={rowDisable}
        subRowDisable={(xt) => defaultSelectedKeys.includes(xt.id)}
        getRowKey={(x) => x.id}
        outRef={getRef('btnRef')}
        getActiveTable={() => getRef('tableMain')?.current?.getApi()}
        getResultTable={() => getRef('table')?.current?.getApi()}
      />
      <Panel title={'已选择'} bodyStyle={{ padding: 0, height: '100%' }} style={{ marginBottom: 0 }} />
      <Layout.Flex>
        <Table
          showRowNumber
          columns={state.columns}
          ref={getRef('table')}
          request={tableSelectedRequest}
          key={state.sourceId}
          pagination={false}
          rowSelection={{
            type: [TableSelectionModel.ROW],
            disabled: (xt) => defaultSelectedKeys.includes(xt.id)
          }}
          onRow={(rowIndex, _, row) => ({
            onDoubleClick: () => {
              if (!defaultSelectedKeys.includes(row.id)) {
                getRef('btnRef').current.toLeft(rowIndex);
              }
            }
          })}
        />
      </Layout.Flex>
    </Layout>
  );
};

export default memo(ShuttleTable);
